<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="orderlist in orderList">
                <div class="left" >
                    <p>{{ formatDate(orderlist.orderDate) }}</p>
                    <p>{{ orderlist.name }}</p>
                </div>
                <div @click="goReport(orderlist.orderId)" >查看体检报告</div>
                <div @click="goAppointmentcancel(orderlist.orderId)">
                    取消预约
                </div>
            </li>
        </ul>
        <div class="bottom-ban"></div>
        <FooterView></FooterView>
    </div>
</template>


<script>
import { reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import FooterView from '@/components/FooterView.vue';
import { getSessionStorage,setSessionStorage } from '@/common';
import router from '@/router';
export default {
    setup() {
        const router = useRouter();
        const state = reactive({
            users: getSessionStorage("userdata"),
            orderList:null
        });

        function initData(){
        axios
            .post("/api/ordersList", { userId: state.users.userId })//localhost:8080/login/userld=?&password=?
            .then((response) => {
                //首先获取后端返回数据
                let result = response.data;
                console.log(result.data)
                if (result.status == 200) {
                    state.orderList=result.data;
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
        function formatDate(orderDate){
            return orderDate.substring(0,10);
        }
        initData();
        function goAppointmentcancel(orderId){
            axios
            .post("/api/refund", { "orderId":orderId })
            .then((response) => {
                let result = response.data;
                console.log(result.data)
                if (result.status == 200) {
                    router.push('/appointmentcancel')
                }else{
                    alert(result.desc);

                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
        function goReport(orderId){
            setSessionStorage("orderId",orderId);
            
            router.push('/report');
        }

        return {
            ...toRefs(state),
            initData,
            goAppointmentcancel,
            formatDate,
            goReport
        }

    },
    components: {
        FooterView,
    },

}

</script>


<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}

header .fa {
    font-size: 8vw;
}



/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

/*********************** ul ***********************/
ul {
    width: 86vw;
    margin: 0 auto;
}

ul li {
    width: 100%;
    height: 14vw;
    border-bottom: solid 1px #EEE;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li .left {
    user-select: none;
    cursor: pointer;
}

ul li .left p:first-child {
    color: #555;
    font-size: 3.3vw;
}

ul li .left p:last-child {
    color: #333;
    font-size: 4.2vw;
    font-weight: 600;
}

ul li .right {
    font-size: 4vw;
    color: #E6A23C;
}
</style>